<template>
  <div class="flowDialog">
    <el-dialog
        title="新增红字发票"
        width="90%"
        :visible.sync="invoiceDialogShow"
        :before-close="handleClose"

        :resize="true"
            :modal="true"
    >
      <div class="flex-app-continer1" style="overflow: auto">
        <div class="info">
          <div style="text-align:center;font-size: 36px !important;color: #bb8c91">
            电子发票(红冲)
          </div>
          <div class="info-top">
            <div class="info-top-l">
              <div style=" display: inline-block; align-items: center; ">
                <div
                    class="radio-tit"
                    style="width: 120px; margin-right: 0; display: inline-block; "
                >
                  <span style="color: red">*&nbsp;</span>红字确认单编号：
                </div>
                <el-input
                    v-model="infoFormData.hzfpqrdbh"
                    placeholder="请输入"
                    size="small"
                    style="width: 200px"
                    maxlength="20"
                    :disabled=hzqrdFlag
                >
                </el-input>
              </div>


            </div>
            <div class="info-top-r">
              <el-button @click="quickAdd" type="primary" size="small">快速添加</el-button>
              <el-button @click="searchFn" type="primary" size="small">查询红字确认单</el-button>
              <el-button @click="reset" size="small">重置</el-button>
            </div>
          </div>
        </div>

        <!-- 整体发票区域 -->
        <div class="invoice-area">
          <div class="box1">
            <span class="bar-tit">购买方信息</span>
          </div>
          <div class="box2">
            <div class="flex-invoice">
              <span class="item-tit">名称：</span>
              <span>{{ infoFormData.gmfmc }}</span>

            </div>
            <div class="flex-invoice">
              <div class="item-tit">
                纳税人识别号：
              </div>
              <span>{{ infoFormData.gmfnsrsbh }}</span>
            </div>
          </div>
          <div class="box3">
            <span class="bar-tit">销售方信息</span>
          </div>
          <div class="box4">
            <div class="flex-invoice">
              <span class="item-tit">名称：</span>
              <span>{{ disabledEditForm.xsfmc }}</span>
            </div>
            <div class="flex-invoice">
              <div class="item-tit">
                纳税人识别号：
              </div>
              <span>{{ disabledEditForm.xsfnsrsbh }}</span>
            </div>
          </div>
          <div class="box5">
            <!-- <div
            style="white-space:nowrap"
        >
                <div class="worldBlueBtn" style="margin-left: 12px;height: 20px;"  @click="insertOneEvent()">
                    新增行
                </div>
                <div class="worldBlueBtn" style="height: 20px;"   @click="removeEvent()">
                    删除行
                </div>
        </div> -->
            <div class="table-area-invoice">
              <vxe-table
                  :data="tableData"
                  ref="xTable"
                  border="none"
                  show-overflow
                  auto-resize
                  resizable
                  style="overflow: auto; width: 100%"
                  height="240"
                  @checkbox-change="selectChangeEvent"
                  @cell-click="cellClickEvent"
                  :row-class-name="rowClassName"
                  :cell-style="tableCellStyle"
                  show-footer
                  :footer-cell-class-name="footerCellClassName"
                  :footer-method="footerMethod"
              >
                <vxe-column
                    type="checkbox"
                    width="60"
                    v-if="from != 'red' && from != 'look'"
                ></vxe-column>

                <vxe-column
                    field="xmmc"
                    title="项目名称"
                    type="html"
                    width="150"
                >
                  <template v-slot="{ row }">
                    <div
                        class="search-box"
                        key="dis2"
                    >
                      <span>{{ row.xmmc }}</span>
                    </div>
                  </template>
                </vxe-column>
                <vxe-column
                    field="ggxh"
                    title="规格型号"
                    width="100"
                >
                </vxe-column>
                <vxe-column
                    field="dw"
                    title="单位"
                    width="60"
                >
                </vxe-column>
                <vxe-column
                    field="sl"
                    title="数量"
                    width="100"
                >
                </vxe-column>
                <vxe-column
                    field="bhsdj"
                    title="单价"
                    key="bhsdj"
                    width="120"
                >
                </vxe-column>
                <vxe-column
                    field="bhsje"
                    title="金额(不含税)"
                    key="b"
                    width="120"
                >
                </vxe-column>
                <vxe-column
                    field="slv"
                    title="税率/征收率"
                    width="120"
                    type="html"
                    :edit-render="{}"
                >
                  <template v-slot="{ row, rowIndex }">
                    <div>
                      <span>{{ (row.slv) }}</span>
                      <!-- <span>{{ addDW(row.slv) }}</span> -->
                    </div>
                  </template>
                </vxe-column>
                <vxe-column field="se" title="税额" width="80">
                  <template #edit="{ row }">
                    <vxe-input
                        v-model="row.se"
                        type="text"
                    ></vxe-input>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </div>
          <div class="box6">价税合计（大写）</div>
          <div class="box7">
            <vxe-button
                status="primary"
                type="text"
                icon="fa fa-times-circle-o"
                style="flex: 1; color: #222; text-align: left"
            >
              {{
                infoFormData.jshjText
              }}
            </vxe-button>
            <span class="total-tit">（小写）</span>
            <div class="total-val">
              ￥{{
                infoFormData.jshj
              }}
            </div>
          </div>
          <div class="box8"><span class="bar-tit">备注</span></div>
          <div class="box9">
            <vxe-textarea
                v-model="infoFormData.bz"
                class="text-area"
                resize="none"
                style="color: #bb8c91; border: none; height: 100%"
                maxlength="450"
                :disabled="true"
            ></vxe-textarea>
          </div>
          <div class="man-area">
            <span class="man-input">开票人：</span>
            <vxe-input
                v-model="disabledEditForm.kpr"
                maxlength="300"
                :disabled="true"
            ></vxe-input>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="handleClose">
              取消
          </el-button>
          <el-button size="small" type="primary" @click="OpenInvoice">
              开票
          </el-button>
      </span>
    </el-dialog>
    <redDialogSearch ref="redList" v-model="dialogVisible" @sednHzfpqrdbh="setHzfpqrdbh"></redDialogSearch>
  </div>
</template>
<script>
import {extendVar} from '@/mixin/extendMixin.js'
import redDialogSearch from './redDialogSearch.vue'
import {getInfo, openInvoice} from '@/api/manualNegativeInvoice'

export default {
  props: {
    invoiceDialogShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: false,

      totalbhsN: 0, //
      totalhsN: 0, //
      seN: 0,
      from: 'edit',


      infoFormData: {
        jems: '01',
        cezslxdm: '',
        gmfsfwzrr: '02',
        dhlx: '',
        dh: '',
        tdys: '',

        gmfmc: '',
        gmfnsrsbh: '',

        gmfdz: '',
        gmfdh: '',
        gmfkhh: '',
        gmfzh: '',
        gmfjbr: '',
        jbrsfzjhm: '',
        gmfjbrlxdh: '',
        xsfdz: '',
        xsfdh: '',
        xsfkhh: '', //
        xsfzh: '', //
        skyhmc: '',
        skyhzh: '', //
        jsfs: '', //
        kprzjhm: '', //
        qyDm: '', //

        xsfmc: '', //
        bz: '', //
        hzfpqrdbh: '',
        bhcLzsdphm: ''
      },
      disabledEditForm: {
        xsfmc: '',
        xsfdz: '',
        xsfdh: '',
        xsfnsrsbh: '',
        xsfzh: '',
        xsfkhh: '',
        qydm: '',
        hydm: '',
        kpr: '',
      },
      tableData: [],
      hzqrdFlag: false
    }
  },
  created() {
  },
  methods: {
    async quickAdd() {
      if (this.infoFormData.hzfpqrdbh) {
        let hzfpxxqrdbh = this.infoFormData.hzfpqrdbh;
        this.tableData = []
        // 将数据放到详情里
        const {code, msg, data} = await getInfo(hzfpxxqrdbh);
        if (code == 200) {
          this.infoFormData = {
            ...data.vmsManualBase,
          }
          this.disabledEditForm = {
            ...data.vmsManualBase
          }
          this.infoFormData.hzfpqrdbh = hzfpxxqrdbh
          data.vmsManualDetail.forEach(item => {
            this.tableData.push({
              ...item,
              xmmc: item.hwhyslwfwmc,
              bhsdj: item.fpspdj,
              sl: item.fpspsl,
              bhsje: item.je,
              slv: item.sl1
            })
          })
          this.hzqrdFlag = !this.hzqrdFlag
        }
      }
    },
    searchFn() {
      this.$refs.redList.getList()
      this.dialogVisible = true
    },
    handleClose() {
      this.reset();
      this.$emit('invoicingShow', false)
      this.hzqrdFlag = false
    },
    async OpenInvoice() {
      if (!this.infoFormData.hzfpqrdbh) {
        this.$message({
          message: '红字发票确认单编号不能为空',
          type: 'warning'
        })
        return
      }
      const {data, msg, code} = await openInvoice(this.infoFormData.hzfpqrdbh, this.infoFormData.bz)
      if (code == 200) {
        this.$message({
          message: data,
          type: 'success'
        })
        this.$emit('invoicingShow', false)
        this.reset();
        await this.$store.dispatch('manualNegativeInvoice/getList')
      }
    },
    rowClassName({row}) {
      return 'row'
    },
    tableCellStyle({row, column, rowIndex, columnIndex}) {
      let rowStyle = {}
      if (
          (columnIndex == 1 ||
              columnIndex == 2 ||
              columnIndex == 3 ||
              columnIndex == 4 ||
              columnIndex == 5 ||
              columnIndex == 6 ||
              columnIndex == 7) &&
          this.from != 'look' &&
          this.from != 'red'
      ) {
        rowStyle = {
          background: '#e6f7f7',
          border: '1px solid #dcdfe6',
          'border-left': 'none',
        }
      } else if (
          columnIndex == 0 &&
          this.from != 'red' &&
          this.from != 'look'
      ) {
        rowStyle.background = '#fff'
        rowStyle = {
          background: '#fff',
          'border-right': '1px solid #dcdfe6',
        }
      } else {
        rowStyle = {
          background: '#EEEEEE',
          border: '1px solid #dcdfe6',
          'border-left': 'none',
        }
      }
      return rowStyle
    },
    footerCellClassName({$rowIndex, column, columnIndex}) {
      if (columnIndex === 0) {
        if ($rowIndex === 0) {
          return 'col-red'
        } else {
          return ''
        }
      }
    },
    sumNum(list, field) {
      let count = 0
      list.forEach((item) => {
        count = this.bigNumAdd(count,item[field])
      })
      let n = this.bigNumFixed(count,2)
      let obj = {
        number: (n),
        numberStr: n,
      }
      if (
          Number.isNaN(obj.number) ||
          obj.number === 'NaN' ||
          obj.numberStr === '0.00'
      ) {
        obj.number = 0
      }
      if (
          Number.isNaN(obj.numberStr) ||
          obj.numberStr === 'NaN' ||
          obj.numberStr === '0.00'
      ) {
        obj.numberStr = 0
      }
      return obj
    },
    footerMethod({columns, data}) {
      let k = this
      const footerData = [
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return '合计'
          }
          if (['bhsje', 'se'].includes(column.property)) {
            let tmp = this.sumNum(data, column.property)

            let tmpNumber = tmp.numberStr

            if (column.property == 'bhsje') {
              k.totalbhs = tmpNumber
              k.totalbhsN = tmp.number
            }
            if (column.property == 'se') {
              k.seN = tmp.number
            }

            return tmp.numberStr
          }
          return null
        }),
      ]
      console
      return footerData
    },
    selectChangeEvent({row, rowIndex, checked}) {
      if (row.rowStatus == 'newRow') {
        return
      }
      if (checked) {
        this.selectedRow.push(rowIndex)
      } else {
      }
    },
    cellClickEvent({row, rowIndex}) {
      this.curRowIndex = rowIndex
    },
    changeMoneyToChinese(money, currencyunit) {
      if (currencyunit == '万元' || currencyunit == '万元/亩') {
        money = (money * 10000).toFixed(6)
      }
      let cnNums = ['零',
        '壹',
        '贰',
        '叁',
        '肆',
        '伍',
        '陆',
        '柒',
        '捌',
        '玖']
      let cnIntRadice = ['', '拾', '佰', '仟'] //
      let cnIntUnits = ['', '万', '亿', '兆'] //
      let cnDecUnits = ['角', '分', '毫', '厘'] //
      let cnInteger = '整' //
      let cnIntLast = '元' //
      let IntegerNum //
      let DecimalNum //
      let DecimalStr = '' //
      // end
      let ChineseStr = '' //

      let parts //

      if (money == '') {
        return ''
      }
      money = parseFloat(money)
      if (money == 0) {
        ChineseStr = cnNums[0] + cnIntLast + cnInteger
        if (currencyunit == '万元/亩') {
          ChineseStr = ChineseStr + '每亩'
        }
        return ChineseStr
      }
      money = money.toString() //
      if (money.indexOf('.') == -1) {
        IntegerNum = money
        DecimalNum = ''
      } else {
        parts = money.split('.')
        IntegerNum = parts[0]
        DecimalNum = parts[1].substr(0, 4)
      }
      if (parseInt(IntegerNum, 10) > 0) {
        let zeroCount = 0
        let IntLen = IntegerNum.length
        let n, p, q, m, i
        for (i = 0; i < IntLen; i++) {
          n = IntegerNum.substr(i, 1)
          p = IntLen - i - 1
          q = p / 4
          m = p % 4
          if (n == '0') {
            zeroCount++
          } else {
            if (zeroCount > 0) {
              ChineseStr += cnNums[0]
            }
            zeroCount = 0 // 归零
            ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
          }
          if (m == 0 && zeroCount < 4) {
            ChineseStr += cnIntUnits[q]
          }
        }
        ChineseStr += cnIntLast
      }

      if (DecimalNum != '') {
        let decLen = DecimalNum.length
        let n, i
        for (i = 0; i < decLen; i++) {
          n = DecimalNum.substr(i, 1)
          if (n != '0') {
            DecimalStr += cnNums[Number(n)] + cnDecUnits[i]
          }
        }
      }

      if (DecimalStr == '') {
        ChineseStr += cnInteger
      } else {
        ChineseStr += DecimalStr
      }
      // end

      if (ChineseStr == '') {
        ChineseStr += cnNums[0] + cnIntLast + cnInteger
      }
      if (currencyunit == '万元/亩') {
        ChineseStr = ChineseStr + '每亩'
      }
      return ChineseStr
    },
    setHzfpqrdbh(row) {
      this.infoFormData.hzfpqrdbh = row.hzfpxxqrdbh
      this.quickAdd()
    },
    reset() {
      // 重置
      this.infoFormData = {}
      this.disabledEditForm = {}
      this.tableData = []
      this.hzqrdFlag = !this.hzqrdFlag
    }
  },
  mixins: [extendVar],
  components: {
    redDialogSearch
  }
}
</script>

<style lang="scss" scoped>
.flowDialog {
  :v-deep .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
    padding: 0;
  }
  ::v-deep .el-dialog{
    // margin-top: auto !important;
    // margin: auto;
  }

  input::-ms-clear {
    width: 0;
    height: 0;
  }

  .invoice-area {
    position: relative;
    width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }

  .box1 {
    width: 28px;
    height: 105px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    color: #bb8c91;
    border-right: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box2 {
    width: 420px;
    height: 105px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-right: none;
    color: #bb8c91;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .box3 {
    width: 28px;
    height: 105px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    color: #bb8c91;
    border-right: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box4 {
    width: 420px;
    height: 105px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    color: #bb8c91;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .box5 {
    width: 896px;
    height: 262px;
    min-height: 190px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-top: none;
    border-bottom: none;
  }

  .box6 {
    width: 240px;
    height: 32.2px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-right: none;
    color: #bb8c91;
    text-align: center;
    line-height: 32.2px;
  }

  .box7 {
    width: 656px;
    height: 32.2px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #bb8c91;
  }

  .box8 {
    width: 28px;
    height: 73.5px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-right: none;
    border-top: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #bb8c91;
  }

  .box9 {
    width: 868px;
    height: 73.5px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-top: none;
    color: #bb8c91;
    overflow-y: auto;
  }

  .box10 {
    width: 896px;
    height: 30px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-top: none;
  }

  .bar-tit {
    width: 20px;
    display: inline-block;
    text-align: center;
  }

  .flex-invoice {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 0px;
    width: 400px;
  }

  .input {
    flex: 1;
  }

  .invoice-area .vxe-table--header-wrapper,
  .invoice-area .vxe-header--row,
  .invoice-area .vxe-table--header {
    background-color: #fff;
    color: #bb8c91;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
  }

  .invoice-area .vxe-table--render-default .vxe-cell {
    font-size: 12px;
    font-weight: normal;
    text-align: center;
  }

  .row {
    box-sizing: border-box;
    height: 24.5px;
    display: inline-block;
    line-height: 24.5px;
    margin-bottom: 5px;
  }

  .invoice-area
  .vxe-table--render-default.vxe-editable.size--mini
  .vxe-body--column,
  .invoice-area
  .vxe-table--render-default.size--mini
  .vxe-header--column.col--ellipsis,
  .invoice-area
  .vxe-table--render-default.size--mini
  .vxe-body--column.col--ellipsis,
  .invoice-area
  .vxe-table--render-default.size--mini
  .vxe-footer--column.col--ellipsis {
    height: 24.5px;
    line-height: 24.5px;
  }

  .table-area-invoice {
    padding-left: 10px;
    height: 240px;
    overflow: auto;
    min-height: 160px;
    position: relative;
  }

  .col-red {
    color: #bb8c91;
  }

  .total-tit {
    color: #bb8c91;
  }

  .total-val {
    color: #bb8c91;
    display: inline-block;
    width: 40%;
  }

  .remark {
    padding: 10px;
    display: inline-block;
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .red {
    color: #ea0000;
  }

  .info {
    width: 900px;
    margin: 0 auto 8px;
    // margin-bottom: 8px;
    .info-top {
      display: flex;
      justify-content: space-between;
      align-items: start;

      .info-top-l {
        min-width: 600px;
      }

      .info-top-r {
        float: right;
      }
    }
  }

  .radio-tit {
    font-weight: bold;
  }

  .radio-item {
    margin-right: 20px;
    cursor: pointer;
  }

  .radio-icon {
    width: 15px;
    height: 15px;
    margin-right: 6px;
  }

  .box9 textarea {
    width: 100%;
    height: 100%;
    color: #bb8c91;
    border: none;
  }

  .man-area {
    margin-top: 12px;
    // margin-left: 60px;
  }

  .man-input {
    color: #bb8c91;
  }

  .add-fj {
    margin-right: 15px;
    cursor: pointer;
    color: #68d3cd;
  }

  .del-fj {
    cursor: pointer;
    color: #68d3cd;
  }

  .fj-area {
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .form-tit {
    height: 14px;
    border-left: 3px solid #07b9b9;
    color: #1a1a1a;
    font-size: 12px;
    line-height: 14px;
    padding-left: 8px;
    font-weight: bold;
    width: 600px;
  }

  ::v-deep .el-dialog__body {
    padding: 0 10px;
  }

}



::v-deep .el-dialog__footer {
  text-align: center;
}
</style>